<template>
    <div id="data-control">
        <div class="type-selected data-control-item">
            <label>数据类型:</label>
            <el-select
                class="type-select"
                v-model="typeSelected"
                size="mini"
                placeholder="请选择数据类型"
            >
                <el-option
                    v-for="(item, index) in types"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <div class="camera-selected data-control-item">
            <label>摄像头:</label>
            <el-select
                class="camera-select"
                v-model="cameraSelected"
                size="mini"
                clearable
                placeholder="请选择摄像头"
            >
                <el-option
                    v-for="(item, index) in cameras"
                    :key="index"
                    :label="item"
                    :value="item"
                >
                </el-option>
            </el-select>
        </div>
        <div class="datetime-range data-control-item">
            <label>时间范围:</label>
            <el-date-picker
                class="datetime-select"
                size="mini"
                v-model="datetimerange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
            >
            </el-date-picker>
        </div>
        <div class="btn-searche data-control-item">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="setParams">检索</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            types: [
                { value: "person", label: "人体识别" },
                { value: "vehicle", label: "车辆识别" },
            ],
            typeSelected: "person",
            cameras: [],
            cameraSelected: null,
            datetimerange: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            const start = new Date(
                                new Date().toLocaleDateString()
                            );
                            const end = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const start =
                                new Date(
                                    new Date().toLocaleDateString()
                                ).getTime() -
                                3600 * 24 * 1000;
                            const end =
                                new Date(
                                    new Date().toLocaleDateString()
                                ).getTime() - 1;
                            picker.$emit("pick", [new Date(parseInt(start)), new Date(parseInt(end))]);
                        },
                    },
                    {
                        text: "最近1小时",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近3小时",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 3);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近6小时",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 6);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近12小时",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 12);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近24小时",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    methods: {
        setParams() {
            var startDatetime = this.getDatetime(this.datetimerange[0]);
            var endDatetime = this.getDatetime(this.datetimerange[1]);
            this.$emit('setParams', this.typeSelected, this.cameraSelected, startDatetime, endDatetime);
        },
        setCameras() {
            this.$axios
                .get("/api/video/data/cameras/" + this.typeSelected)
                .then((response) => {
                    if (response.data.success) {
                        this.cameras = response.data.o;
                    }
                })
                .catch((error) => {});
        },
        setDatetimeRange() {
            var start = new Date();
            var end = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 1);
            this.datetimerange.push(start);
            this.datetimerange.push(end);
        },
        getDatetime(date) {
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            if(month < 10)
                month = '0' + month;
            if(day < 10)
                day = '0' + day;
            if(hours < 10)
                hours = '0' + hours;
            if(minutes < 10)
                minutes = '0' + minutes;
            if(seconds < 10)
                seconds = '0' + seconds;
            return '' + year + month + day + hours + minutes + seconds;
        },
    },
    mounted() {
        this.setCameras();
        this.setDatetimeRange();
        this.setParams();
    },
    watch: {
        typeSelected(newValue, oldValue) {
            this.cameraSelected = null;
            this.setCameras();
        },
    },
};
</script>

<style scoped>
#data-control {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    height: 45px;
    line-height: 40px;
    white-space: nowrap; 
}
.data-control-item {
    display: inline;
    margin-right: 20px;
}
.data-control-item label {
    height: 28px;
    line-height: 28px;
    color: white;
    font-weight: lighter;
}
.type-select {
    width: 100px;
}
.camera-select {
    width: 125px;
}
.datetime-select {
    width: 350px;
}
</style>